<template>
	<m-block bgColor="unset" class="goods-list" spa="0" :gap="gap">
		<view class="waterfall-container">
			<view class="waterfall-column" v-for="i in 2" :key="i" :class="[i === 1 ? '' : 'column-gap']"
				:style="{ width: `${100/2}%` }">
				<view v-for="(item, index) in filterColumnData(i)" :key="index" class="waterfall-item">
					<goodsCard :key="item.id" class="li" :item="item" type="1"></goodsCard>
				</view>
			</view>
		</view>
		<m-loading :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
	</m-block>
</template>

<script>
	import { GetGoodsPage } from '@/api/Goods.js';
	export default {
		name: "hot-sale",
		data() {
			return {

				listArr: [],
				pageSize: 10,
				pageIndex: 1,
				pageCount: 1,
				isLoading: false
			};
		},
		props: {
			searckey: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			wards: {
				type: [String, Number],
				default: '1'
			},
			tid: [String, Number],
			//排序模式
			sortPrice: {
				type: [String, Number],
				default: 5
			},
			ishot: { // 推荐商品
				type: [String, Number],
				default: 0
			},
			isnew: { // 是否新品
				type: [String, Number],
				default: 0
			},
			istop: { // 火爆商品
				type: [String, Number],
				default: 0
			},
			gap: { // 火爆商品
				type: [String],
				default: '0 24'
			},

		},
		mounted() {
			// if (this.isRecommend || this.isNew || this.isCheap || this.isBargain) {
			// 	this.isShowOnFirstPage = false;
			// }
			// this.getData();
		},
		watch: {
			tid() {
				this.onReset();
			},
		},
		onLoad() {
			
		},
		methods: {
			onReset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.listArr = [];
				this.getData();
			},
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				this.isLoading = true;
				const params = {
					ishot: this.ishot,
					istop: this.istop,
					isnew: this.isnew,
					key: this.searckey,
					tid: this.tid, // 分类id
					wards: Number(this.wards),
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				}

				const { success, list, pageCount } = await GetGoodsPage(params);
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();

			},
			filterColumnData(columnIndex) {
				try {
					return this.listArr.filter((_, index) => index % 2 === columnIndex);
				} catch {
					return this.listArr
				}

			}
		},
	}
</script>

<style lang="scss">
	.goods-list {
		.title {
			text {
				padding: 0 20rpx;
			}

			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}

	.list-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
	}



	.waterfall-container {
		display: flex;
		flex-direction: row;
		width: 100%;
		/* #ifdef APP-PLUS */
		flex: 1;
		/* #endif */
	}

	.waterfall-column {
		flex: 1;
		box-sizing: border-box;
		overflow: hidden;
		/* #ifdef APP-PLUS */
		flex-direction: column;
		/* #endif */

		&.column-gap {
			padding-right: 20rpx;
		}
	}

	.waterfall-item {
		margin-bottom: 20rpx;
		/* #ifdef APP-PLUS */
		flex-direction: column;
		/* #endif */
	}
</style>